<template>
   <div>
        <headNav></headNav>
        <div class="head"></div>
        <div class="content">
               <div class="user_con">
                    <div class="user_div">
                        <div class="user_left">
                            <div class="center">个人中心</div>
                            <ul>
                                <li @click="clickMenu(index)" :class="index==ind ? 'item_active' : '' " class="menuli" v-for="(item,index) in arr" :key="index">{{item}}</li>
                            </ul>
                        </div>
                        <div class="user_right">
                            <div v-if="ind==0" style="width:100%;height:100%">
                                  <div class="menucon1">
                                      <div class="user_right_tit">
                                             <div class="user_right_sch">学校</div>
                                             <div class="user_right_name">{{info.name}}</div>
                                      </div>
                                      <div class="user_right_list">
                                        <div class="user_right_list_item" @click="zpdetail(item.id)" v-for="(item,index) in upArr" :key="index">
                                            <img class="per" :src="item.src" alt="">
                                            <div class="user_right_list_item_t">
                                                <div class="zp_name">作品名称:</div>
                                                <p class="zp_p">{{item.title}}</p>
                                            </div>
                                            <div class="user_right_list_item_t">
                                                <div class="zp_name">作品主题:</div>
                                                <p class="zp_p" v-if="item.activity_id==1">献礼中华人民共和国成立75周年</p>
                                                <p class="zp_p" v-if="item.activity_id==0">普通专题</p>
                                            </div>
                                        </div>
                                 
                                      </div>
                                      <img @click="getUpListMore" class="more" src="./../static/images/more.png" alt="">
                                  </div>
                            </div>
                            <div v-if="ind==1" style="width:100%;height:100%">
                                  <div class="menucon1">
                                        <div class="dr_div">
                                            <div class="user_right_tit">
                                                <div class="user_right_sch">学校</div>
                                                <div class="user_right_name">{{info.name}}</div>
                                            </div>
                                            <div class="add_div">
                                                <div @click="add" class="add"></div>
                                                <span class="add_wz">添加新达人</span>
                                            </div>
                                        </div>
                                        <div class="dr_list">
                                             <div  class="dr_list_item"  @click="drdetail(item.id)" v-for="(item,index) in dr" :key="index">
                                                <el-button class="deletespan" type="text" @click.stop.prevent="open(item.id)">删除</el-button>
                                                 <div class="dr_list_item_left">
                                                     <img class="dr_per2" :src="'https://eduvideo.hangzhou.com.cn'+item.poster" alt="">
                                                 </div>
                                                 <div class="dr_list_item_right">
                                                      <div class="dr_div_top">
                                                            <div class="dr_div_top_t">姓名：<span class="dr_span">{{item.name}}</span></div>
                                                            <div class="dr_div_top_t">年龄：<span class="dr_span">{{item.age}}</span></div>
                                                            <div class="dr_div_top_t" v-if="item.sex=='1'">性别：<span class="dr_span">男</span></div>
                                                            <div class="dr_div_top_t" v-if="item.sex=='0'">性别：<span class="dr_span">女</span></div>
                                                      </div>
                                                      <div class="dr_div_bottom">
                                                        <div class="userdsc">个人说明：</div>
                                                        <p class="userp">{{item.intro}}</p>
                                                      </div>
                                                 </div>
                                             </div>
                                          
                                        </div>
                                        <img @click="getDrLisMore" class="more" src="./../static/images/more.png" alt="">
                                  </div>
                            </div>
                            <div v-if="ind==2" style="width:100%;height:100%">
                                <div class="menucon1">
                                    <div class="user_right_tit">
                                        <div class="user_right_sch">学校</div>
                                        <div class="user_right_name">{{info.name}}</div>
                                    </div>
                                    <div class="user_right_list">
                                          <div class="user_right_list_item"  @click="zpdetail(item.id)" v-for="(item,index) in artList" :key="index">
                                              <img class="per" :src="item.src" alt="">
                                              <div class="user_right_list_item_t">
                                                  <div class="zp_name">作品名称:</div>
                                                  <p class="zp_p">{{item.title}}</p>
                                              </div>
                                              <div class="user_right_list_item_t">
                                                  <div class="zp_name">作品主题:</div>
                                                  <p class="zp_p" v-if="item.activity_id==1">献礼中华人民共和国成立75周年</p>
                                                  <p class="zp_p" v-if="item.activity_id==0">普通专题</p>
                                              </div>
                                          </div>
                                         
                                    </div>
                                    <img @click="getDrArtListMore" class="more" src="./../static/images/more.png" alt="">
                                </div>
                            </div>
                        </div>
                    </div>
               </div>
        </div>
        <el-dialog title="达人信息" :visible.sync="dialogFormVisible" :close-on-click-modal="no" :show-close="no">
            <el-form :model="form">
              <el-form-item label="姓名:" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="年龄:" :label-width="formLabelWidth">
                <el-input v-model="form.age" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="性别:" :label-width="formLabelWidth">
                <el-select v-model="form.sex" :popper-append-to-body="false">
                  <el-option label="女" value="0"></el-option>
                  <el-option label="男" value="1"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="类别:" :label-width="formLabelWidth">
              <el-select v-model="form.talent" :popper-append-to-body="false">
                <el-option label="其它" value="0"></el-option>
                <el-option label="文化达人" value="1"></el-option>
                <el-option label="科学达人" value="2"></el-option>
                <el-option label="运动达人" value="3"></el-option>
                <el-option label="劳动达人" value="4"></el-option>
                <el-option label="艺术达人" value="5"></el-option>
                </el-select>
            </el-form-item>
              <el-form-item label="个人说明:" :label-width="formLabelWidth">
                <el-input type="textarea" placeholder="(200字以内)" v-model="form.description"></el-input>
              </el-form-item>
                <el-form-item label="照片上传" :label-width="formLabelWidth">
                <div class="up_button" v-if="imgList.length==0">
                    <input  accept="image/*"  class="up_input" type="file" ref="file" @change="upload($event)">
                </div>
                <div class="imgBox" v-if="imgList.length>0">
                    <div   v-for="item in imgList" :key="item" >
                        <el-image 
                                style="width: 100px; height: 100px"
                                :src="'https://eduvideo.hangzhou.com.cn'+imgList[0]" 
                                :preview-src-list="srcList">
                            </el-image>
                    </div>
                  </div>
              </el-form-item>
            </el-form>
          
            <div slot="footer" class="dialog-footer">
              <el-button @click="canle">取 消</el-button>
              <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
          </el-dialog>
        <footComponent></footComponent>
   </div>
</template>
<script>
import axios from 'axios';

import footComponent from '@/common/foot.vue';
import headNav from '@/common/headNav.vue';

export default {
    name: 'userPage',
    components:{
        headNav,
        footComponent,
    },
    data(){
        return {
            no:false,
            ind:0,
            arr:['已上传作品','学校达人','达人作品','我要上传'],
            dialogFormVisible: false,
            form: {
                name: '',
                age:'',
                sex:'',
                description:'',
                talent:'0'
            },
            formLabelWidth: '160px',
            imgList:[],
            srcList: [],
            poster:'',
            dr:[],
            drpage:1,
            info:{},
            artList:[],
            upArr:[],
            arpage:1,
            uppage:1 
        }
    },
    created(){
      
        this.userInfo()
        this.getUpList()
        this.getDrList()
        this.getDrArtList()
    },
    methods:{
        // 添加达人
        add(){
            this.dialogFormVisible = true
        },
        open(id) {
        this.$confirm('确定删除当前达人吗？', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        })
          .then(() => {
            this.$axios.delete('https://eduvideo.hangzhou.com.cn/api/v1/talent/'+id).then(res=>{
                  console.log(res.data.status)
                  if(res.data.status=='success'){
                    this.$message({
                        type:'success',
                        message: '删除成功'
                    });
                        // 从本地数据中移除已删除的作品
                 this.dr = this.dr.filter(item => item.id !== id);
                  }
            })
          })
          .catch(()=> {
           
          });
      },
        clickMenu(index){
            this.ind = index;
            if(index==3){
                this.$router.push('/upload');
            }
        },
        reset(){
            this.form.name = '';
            this.form.age = '';
            this.form.sex = '';
            this.form.description = '';
            this.form.talent = '0';
            this.imgList = [];
            this.poster = '';
            this.srcList = [];
        },
        canle(){
            this.dialogFormVisible = false;
            this.reset();
        },
        confirm(){
            var token = localStorage.getItem('isLoginSuccess');
            axios.defaults.headers.common['Authorization'] = "Bearer " + token
            var parms = {
                name:this.form.name,
                age:this.form.age,
                sex:this.form.sex,
                intro:this.form.description,
                type:this.form.talent,
                poster:this.poster
            }
            this.$axios.post('https://eduvideo.hangzhou.com.cn/api/v1/talent',parms).then(res=>{
                if(res.data.status == 'success'){
                    this.$message({
                        showClose: true,
                        message: res.data.message,
                        type: 'success'
                    });
                    var token = localStorage.getItem('isLoginSuccess');
                    axios.defaults.headers.common['Authorization'] = "Bearer " + token
                    this.$axios.get('https://eduvideo.hangzhou.com.cn/api/v1/talent?page=1').then((res)=>{
                        this.dr = res.data.data.data
                    })
                    
                }else{
                    this.$message({
                        showClose: true,
                        message: res.data.message,
                        type: 'error'
                    });
                }
                
            })
            this.dialogFormVisible = false;
            this.reset();
        },
        upload(e){
            var token = localStorage.getItem('isLoginSuccess');
            axios.defaults.headers.common['Authorization'] = "Bearer " + token
                   //定义允许上传格式 在前台就可以直接判断，不合法的格式将不会上传
                   var imgtype = ['jpg', 'jpeg', 'png','image/jpeg','image/png'];  //允许上传的图片格式
                     var fi = e.target.files[0]; //得到文件信息
                    if(fi.size>(50*1024*1024)){
                                this.$message({
                                    showClose: true,
                                    message: '文件大小不能超过50MB！',
                                    type: 'error'
                                 });
                        return false;
                    }
                    if (fi!=null) {
                        //判断文件格式是否是图片 如果不是图片则返回false
                        var fname = fi.name.split('.');
                        var type = fi.type
                        //实例化h5的fileReader
                        // var fr = new FileReader();
                        // fr.readAsDataURL(fi); //以base64编码格式读取图片文件
                        if(imgtype.indexOf(type.toLowerCase()) !=-1 ){
                            // fr.onload = function (frev) {
                            //     var vid = frev.target.result; //得到结果数据
                                //使用ajax 提交数据
                                 var form = new FormData();
                                form.append("act","upload");
                                // form.append("msg",pic);
                                form.append("filename",fname[0]);
                                form.append("file",fi);
                                form.append("filetype",fname[1]);
                                form.append("isvideo",'no');
                               
                                this.$axios.post('https://eduvideo.hangzhou.com.cn/api/v1/upload',form).then(res=>{
                                    if(res.data.status == 'success'){
                                        this.imgList.push(res.data.data.path)
                                        this.poster = res.data.data.path
                                        this.srcList.push('https://eduvideo.hangzhou.com.cn'+res.data.data.path)
                                        this.$message({
                                        message: '上传成功',
                                        type:'success',
                                        offset:window.screen.height/2,
                                        duration:300
                                        })
                                    }else{
                                        this.$message({
                                        message: res.data.message,
                                        type:'error',
                                        offset:window.screen.height/2,
                                        })
                                    }
                                
                                })
                        }else {
                                this.$message({
                                    showClose: true,
                                    message: '不支持该文件格式!',
                                    type: 'error',
                                    offset:window.screen.height/2,
                                    });
                                  this.loading1 = false
                                  return false;
                            
                        }
                    }
            },
        getDrLisMore(){
            this.drpage++
            this.getDrList()
        },
        getDrArtListMore(){
            this.arpage++
            this.getDrArtList()
        },
        getUpListMore(){
            this.uppage++
            this.getUpList()
        },
     
        // 获取达人上传的作品
        getDrList(){
            var token = localStorage.getItem('isLoginSuccess');
            axios.defaults.headers.common['Authorization'] = "Bearer " + token
            this.$axios.get('https://eduvideo.hangzhou.com.cn/api/v1/talent?page='+this.drpage).then((res)=>{
                console.log(res.data.data.data)
                this.dr = this.dr.concat(res.data.data.data)
            })
        },
        userInfo(){
            var token = localStorage.getItem('isLoginSuccess');
            axios.defaults.headers.common['Authorization'] = "Bearer " + token
            this.$axios.get('https://eduvideo.hangzhou.com.cn/api/v1/current').then(res=>{
            this.info = res.data.data.area
            
            })
        },
        // 获取达人的所有作品
        getDrArtList(){
            var token = localStorage.getItem('isLoginSuccess');
            axios.defaults.headers.common['Authorization'] = "Bearer " + token
            this.$axios.get('https://eduvideo.hangzhou.com.cn/api/v1/talent/list?page='+this.arpage).then(res=>{
                   
                    var arr = []
                    res.data.data.data.forEach(item=>{
                        var obj = {}
                    obj.title = item.title
                    obj.activity_id = item.activity_id
                    obj.id = item.id
                    // if(item.type==1){
                    //     if(item.files[0].file_cover){
                    //         obj.src ='https://eduvideo.hangzhou.com.cn' + item.files[0].file_cover
                    //     }
                    // }else{
                    //     if(item.files[0].full_file_path){
                    //         obj.src = item.files[0].file_path
                    //     } 
                    // }
                    obj.src =item.poster
                    arr.push(obj)
                    })
              this.artList = this.artList.concat(arr)
            
            })
        },
        // 获已经上传所有作品
        getUpList(){
            var token = localStorage.getItem('isLoginSuccess');
            axios.defaults.headers.common['Authorization'] = "Bearer " + token
            this.$axios.get('https://eduvideo.hangzhou.com.cn/api/v1/get_upload_works?page='+this.uppage).then(res=>{
                    var arr = []
                    res.data.data.data.forEach(item=>{
                        var obj = {}
                    obj.title = item.title
                    obj.activity_id = item.activity_id
                    obj.id = item.id
                    // if(item.type==1){
                    //     obj.src ='https://eduvideo.hangzhou.com.cn' + item.files[0].file_cover
                    // }else{
                    //     obj.src = item.files[0].full_file_path
                    // }
                    obj.src =item.poster
                    arr.push(obj)
                    })
                this.upArr = this.upArr.concat(arr)
            
            })
        },
        // 作品详情
        zpdetail(val){
            this.$router.push({
                path:'/workDetail',
                query:{
                    id:val
                }
            })
       },
         // 达人详情
         drdetail(val){
            this.$router.push({
                path:'/drdetail',
                query:{
                    id:val
                }
            })
       },
    }
}
</script>
<style scoped>
.head{
    width: 100%;
    height: 464px;
    background: url('./../static/images/banner.jpg') no-repeat center top;
  }
  .content{
    width: 100%;
    height: 1500px;
    background: url('./../static/images/detail_con.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .user_con{
    width: 100%;
    height: 1100px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .user_div{
   width: 1400px;
   height: 1100px;
   display: flex;
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
} 
.user_left{
    width: 270px;
    height: 100%;
    background-color: #6275d3;
}
.user_right{
    width: calc(100% - 270px);
    height: 100%;
    background-color: #fff;
}
.center{
    width: 100%;
    height: 100px;
    border-bottom: 1px solid #8d9add;
    line-height: 100px;
    text-align: center;
    color: #fff;
    font-size: 30px;

}
ul,li{
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}
.menuli{
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
    color: #fff;
}
li .menuli :hover{
    background-color: #fff !important;
    color: #6275d3 !important;
}
.item_active{
    background-color: #fff !important;
    color: #6275d3 !important;
}
.menucon1{
    margin-left: 60px;
    width: 1070px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.user_right_tit{
    height: 100px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
}
.dr_div{
    height: 100px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.user_right_sch{
    width: 118px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    letter-spacing: 5px;
    color: #fff;
    font-weight: 700;
    background-color: #6275d3;
    border-radius: 20px;
}
.user_right_name{
    color: #000;
    font-size: 24px;
    margin-left: 25px;
}
.user_right_list{
    margin-top: 50px;
    width: 100%;
    height: 800px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
}
.user_right_list_item{
    width: 300px;
    height: auto;
    margin-bottom: 30px;
    margin-left: 85px;
    cursor: pointer;
}
.user_right_list .user_right_list_item:nth-child(3n+1){
    margin-left: 0 !important;
  }
.more{
    width: 282px;
    height: 52px;
    margin-top: 30px;
    cursor: pointer;
}
.per{
    width: 300px;
    height: 225px;
    object-fit: cover;
    vertical-align: middle;
}
.user_right_list_item_t{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 25px;
}
.zp_name{
    width: 94px;
    color: #404040;
    font-size: 18px;
}
.zp_p{
    margin: 0;
    padding: 0;
    color: #3f3f3f;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: calc(100% - 94px);
    line-height: 25px;
}
.add{
    width: 37px;
    height: 37px;
    background: url('./../static/images/add.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
}
.add_div{
    width: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}
.add_wz{
    font-size: 14px;
    color: #6275d3;
    margin-top: 10px;
}
.dr_list{
    margin-top: 50px;
    width: 100%;
    height: 800px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    overflow-y: scroll;
  
}
.dr_list_item{
    background-color: #e9e9e9;
    width:100%;
    height: 250px;
    border-radius: 15px;
    border: 1px solid #dcdcdc;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding-bottom: 30px;
    padding-top: 30px;
    margin-bottom: 30px;
    cursor: pointer;
    position: relative;
}
.deletespan{
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    line-height: 26px !important;
    cursor: pointer;
    z-index: 100000;
    cursor: pointer;
}
.dr_per2{
    width: 231px;
    height: 171px;
    object-fit: cover;
    margin-left: 25px;
}
.dr_list_item_right{
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 171px;
    width:calc(100% - 280px);
  
}
.dr_div_top{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items:center;
    width: 100%;
}
.dr_div_top_t{
    flex: 1;
    color: #404040;
    font-size: 18px;
    font-weight: bolder;
}
.dr_span{
    color: #3f3f3f;
    font-size: 16px;
    font-weight: normal;
}
.dr_div_bottom{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items:flex-start;
    width: 100%;
    margin-top: 30px;
}
.userdsc{
    width: 100px;
    color: #404040;
    font-size: 18px;
    font-weight: bolder;
}
.userp{
    margin: 0;
    padding: 0;
    color: #3f3f3f;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 4;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    width: calc(100% - 100px);
    line-height: 25px;
}
::v-deep .el-select-dropdown__item{
    padding-left: 10px !important;
}
.up_button{
    width: 100px;
    height: 100px;
  background: url('./../static/images/up_poster.png') no-repeat;
  background-size: 100% 100%;
  }
  .up_input{
    opacity: 0;
    width: 100px;
    height: 100px;
  }
  .dr_list::-webkit-scrollbar {
    width: 0 !important;
   
  }
</style>